<template>
  <el-card class="sales-visited">
    <div class="sales-visited-header">
      <el-tabs v-model="salesVisitedTab">
        <el-tab-pane label="销售额" name="sales"></el-tab-pane>
        <el-tab-pane label="访问量" name="visited"></el-tab-pane>
      </el-tabs>

      <div class="sales-visited-wrap">
        <el-radio-group class="mr-20">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>
        <el-date-picker
          class=""
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
        />
      </div>
    </div>

    <div class="content">
      <SalesVisitedChart
        class="content-left"
        :data="data"
        :dataAxis="dataAxis"
        :salesVisitedTab="salesVisitedTab"
      />

      <div class="content-right">
        <div class="title">
          {{
            salesVisitedTab === "sales" ? "门店销售额排名" : "门店访问量排名"
          }}
        </div>
        <div class="list">
          <div class="list-item" v-for="item in rankData" :key="item.no">
            <div class="no" :class="{ 'first-no': item.no <= 3 }">
              {{ item.no }}
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="count">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "SalesVisited",
};
</script>

<script lang="ts" setup>
import SalesVisitedChart from "./salesVisitedChart.vue";
import { ref, computed } from "vue";
import type { homeItem } from "@/api/mock/model/homeModel";
const shortcuts = [
  {
    text: "最近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "最近一月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "最近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const props = defineProps<{
  orderFullYearAxis: string[];
  orderFullYear: number[];
  userFullYearAxis: string[];
  userFullYear: number[];
  orderRank: homeItem[];
  userRank: homeItem[];
}>();

const salesVisitedTab = ref("sales");

const data = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYear
    : props.userFullYear;
});

const dataAxis = computed(() => {
  return salesVisitedTab.value === "sales"
    ? props.orderFullYearAxis
    : props.userFullYearAxis;
});

const orderRank = computed(() => props.orderRank);
const userRank = computed(() => props.userRank);
console.log(orderRank);
console.log(userRank);

const rankData = computed(() => {
  return salesVisitedTab.value === "sales" ? orderRank.value : userRank.value;
});
</script>

<style scoped lang="scss">
.sales-visited :deep() {
  .el-card__body {
    padding: 0 20px;
  }
  .el-tabs__item {
    height: 60px;
    width: 100px;
    line-height: 60px;
    text-align: center;
    padding: 0;
    &.is-active {
      background-color: #ecf5ff;
    }
  }
  .sales-visited-header {
    position: relative;
  }
  .sales-visited-wrap {
    position: absolute;
    right: 20px;
    top: 0;
    height: 60px;
    display: flex;
    align-items: center;
  }
  .content {
    display: flex;
    height: 270px;
  }
  .content-left {
    flex: 5;
  }
  .content-right {
    flex: 2;
  }

  .title {
    font-size: 14px;
  }

  .list-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 20px;
    margin: 6px 20px 6px 0;
  }
  .no {
    width: 20px;
    height: 20px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.first-no {
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    font-weight: 300;
  }

  .name {
    margin-left: 10px;
  }

  .count {
    flex: 1;
    text-align: right;
  }
}
</style>
